{% extends "base.html" %}
{% block base %}

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">陈勇志的接口测试平台</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">设置</a></li>
                <li><a href="/logout/">退出</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="搜索...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li><a href="/project/"><i class="glyphicon glyphicon-th-large">&nbsp;</i>项目管理 <span class="sr-only">(current)</span></a>
                </li>
                <li><a href="/module/"><i class="glyphicon glyphicon-th">&nbsp;</i>模块管理</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li class="active"><a href="/case_manage/">用例管理</a></li>
                <li><a href="/task_manage/">任务管理</a></li>
            </ul>
            <ul class="nav nav-sidebar">
                <li><a href="">mock server</a></li>
                <li><a href="">测试工具</a></li>
                <li><a href="">更多工具</a></li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!--模块列表-->
            <h4 class="sub-header"><span class="label label-primary">编辑测试用例</span></h4>
            <!--测试用例名称-->
            <div style="margin-bottom: 10px">
                <div class="input-group">
                    <span class="input-group-addon">用例名称</span>
                <input type="text" id="case_name" style="width: 570px;" class="form-control"
                       placeholder='请输入测试用例描述...'>
                    <button type="button" class="btn btn-primary" onclick="sendFun()">发送请求</button>
                </div>
            </div>
            <!--用例描述-->
            <div class="input-group">
                <span class="input-group-addon">用例描述</span>
                <input type="text" id="case_description" style="width: 570px;" class="form-control"
                       placeholder='请输入测试用例描述...'>
            </div>
            <!--url-->
            <div style="margin-bottom: 12px" class="input-group">
                <div class="input-group">
                    <select id="req_method" class="selectpicker" data-style="btn-info">
                        <option value="get" selected>GET</option>
                        <option value="post">POST</option>
                        <option value="put">PUT</option>
                        <option value="patch">PATCH</option>
                        <option value="delete">DELETE</option>
                    </select>
                    <input type="text" id="req_url" style="width: 582px;" class="form-control" placeholder="URL...">
                    <!--发送按钮-->

                </div>
            </div>
            <!--header-->
                <div style="margin-bottom: 10px">
                <div class="input-group">
                        <span class="input-group-addon">HEADER</span>
                    <input type="text" id="header" style="width: 570px;" class="form-control">
                </div>
            </div>
            <!--参数类型-->
            <div style="margin-top: 10px;">
                <label>* 参数类型：</label>
                <label class="radio-inline">
                    <input type="radio" name="par_type" id="form" value="form-data" checked> FORM-DATA
                </label>
                <label class="radio-inline">
                    <input type="radio" name="par_type" id="json" value="json"> JSON
                </label>
            </div>
            <!--接口参数-->
            <div style="margin-bottom: 12px; margin-right: 370px;" class="input-group">
                <span class="input-group-addon">请求参数</span>
                <textarea id="parameter" rows="2" class="form-control"></textarea>
            </div>
            <h6 style="color:#8B8989">说明：以字典的方式设置参数，如：{"id":1, "name":"名称"}</h6>
            <!--            <p style="color:#8B8989">说明：以字典的方式设置参数，如：{"id":1, "name":"名称"}</p>-->
            <!--预期结果-->
            <div style="margin-bottom: 5px; margin-right: 370px;" class="input-group">
                <span class="input-group-addon">预期结果</span>
                <textarea id="assert" class="form-control" rows="2" name=textarea></textarea>
            </div>
            <!--接口响应-->
            <div style="margin-bottom: 5px; margin-right: 370px;" class="input-group">
                <span class="input-group-addon">响应结果</span>
                <textarea id="result" class="form-control" rows="5" name=textarea></textarea>
            </div>
            <!--添加断言 -->
            <div style="margin-top: 5px;">
                <label>* 断言方式：</label>
                <label class="radio-inline">
                    <input type="radio" name="assert_method" id="equal" value="equal" checked>Equal
                </label>
                <label class="radio-inline">
                    <input type="radio" name="assert_method" id="contains" value="contains">Contains
                </label>
            </div>
            <div>
                <button type="button" class="btn btn-primary" onclick="assertFun()">执行断言</button>
            </div>

            <!--后置处理-->
            <div class="input-group">
                <span class="input-group-addon">JSO表达式</span>
                <input type="text" id="json_extract" style="width: 570px;" class="form-control"
                       placeholder="格式例：${params}=[data][token]">
            </div>

            <div class="input-group">
                <span class="input-group-addon">正则表达式</span>
                <input type="text" id="regular_expression" style="width: 570px;" class="form-control"
                       placeholder='例："token": (.*?),'>
            </div>
            <div class="input-group">
                <span class="input-group-addon">参数值列表</span>
                <input type="text" id="regular_extract" style="width: 570px;" class="form-control"
                       placeholder="例：['token']">
            </div>

            <!--绑定项目-模块,2级联动-->
            <div style="margin-top: 20px;">
                <label>*所属项目：</label>
                <select class="form-control select2-single" id="selectProject" style="width:180px">
                </select>
                <label>*所属模块: </label>
                <select class="form-control select2-single" id="selectModule" style="width:180px"></select>
            </div>
            <div style="margin-top: 5px;">
                <button style="button" class="btn btn-primary" onclick="saveFun()">保存用例</button>
            </div>

        </div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.10/dist/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<script type="text/javascript">

    // 获取用例信息
    TestCaseInit()

    // 调用项目初始化，获取项目列表信息
    // ProjectInit("selectProject")

    // 监听项目列表的变化
    //$('#selectProject').change(function(){
    //    let isSelected = $(this).children('option:selected').val()
    //    ModuleInit("selectModule",isSelected)
    //    });


    // 发送请求
    function sendFun(){
        var url = $("#req_url").val();
        var header = document.querySelector("#header").value;
        var method = $('select[id="req_method"]').val()
        var params_type = $('input[name="par_type"]:checked').val();
        var parameter = document.querySelector('#parameter').value;
        if (url === ""){
            window.alert("URL 不能为空");
            return;
        }
        $.post("/case_manage/debug",{
                                url:url,
                                header:header,
                                method:method,
                                type:params_type,
                                parameter:parameter,
                              },
        function(data,status){
            alert("数据:"+ data.result);
            document.querySelector("#result").value = data.result;});
    }

    //断言方法
    function assertFun(){
        var response_text = $("#result").val();
        var excepted_text = $("#assert").val();
        var assert_method = $('input[name="assert_method"]:checked').val()
        if (response_text === "" || excepted_text === ""){
            window.alert("响应结果和预期结果不能为空");
            return;
        }
        $.post("/case_manage/case_assert", {
                                excepted : excepted_text,
                                result : response_text,
                                assert_method:assert_method},
        function(data,status){
            alert("断言结果: " + data.msg);});
        }


    // 保存用例
    function saveFun(){
        let case_id = document.location.pathname.split("/")[3]
        let case_name = $('#case_name').val()
        let description = $('#case_description').val()
        let url = $("#req_url").val()
        let request_method = $('select[id="req_method"]').val()
        let headers = $('#header').val()
        let params_type = $('input[name="par_type"]:checked').val()
        let parameters = $('#parameter').val()
        let response = $('#result').val()
        let assert_type = $('input[name="assert_method"]:checked').val()
        let expected_result = $('#assert').val()
        let module_id = $('select[id="selectModule"]').val()
        let json_extract = $('#json_extract').val()
        let regular_expression = $('#regular_expression').val()
        let regular_extract = $('#regular_extract').val()

        if (url === ""){
            window.alert("URL 不能为空!")
            return
        }else if(case_name ===""){
            window.alert("测试用例名称不能为空！")
        }else if (module_id == ""){
            window.alert("所属模块不能为空！")
        }else if(expected_result == ""){
            window.alert("断言数据不能为空！")
        }

        $.post('/case_manage/save_case/',
                {
                    name:case_name,
                    description:description,
                    url:url,
                    request_method:request_method,
                    request_header:headers,
                    params_type:params_type,
                    parameters:parameters,
                    response:response,
                    assert_type:assert_type,
                    assert_result:expected_result,
                    module_id:module_id,
                    json_extract:json_extract,
                    regular_expression:regular_expression,
                    regular_extract:regular_extract,
                    case_id :case_id,

                },
                function(data,status){
                    window.alert("保存结果:" + data.msg)
                })
    }
</script>

{% endblock %}